<template>
  <div class="interviewer-interview-history-set-manage">
    <el-card>
      <el-tag>面试官面试记录管理</el-tag>
      <el-table :data.sync="historyData" style="width: 100%" :stripe="true">
        <el-table-column prop="id" label="#" width="80"> </el-table-column>
        <el-table-column prop="room_name" label="面试主题" width="300">
          <template slot-scope="scope">
            <el-link type="primary">
              {{ scope.row.room_name }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间"> </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="onHistoryCheck(scope.row)"
            >
              查看
            </el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="onHistoryRemove(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="->,sizes,prev, pager, next,jumper"
        :page-sizes="[5, 10, 20]"
        :current-page="this.pagination.pageNum"
        :page-size="this.pagination.pageSize"
        :page-count="this.pagination.pageCount"
        :pager-count="5"
        @size-change="onPageSizeChange"
        @current-change="onPageNumChange"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      title="删除面试记录"
      :visible.sync="dialogRemoveVisible"
      :before-close="beforeDialogRemoveClose"
      append-to-body
    >
      <span>确认删除此面试记录？</span>
      <div slot="footer">
        <el-button @click="onHistoryRemoveCancel">取消</el-button>
        <el-button type="primary" @click="onHistoryRemoveConfirm"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "InterviewerInterviewHistorySetManage",
  components: {},
  created: function() {
    this.getHistoryData();
  },
  methods: {
    onHistoryCheck(row) {
      this.$router.push("/history/" + row._id);
    },
    setHistoryDefault() {
      this.history = {
        _id: "",
        title: "",
        createTime: "",
      };
    },
    getHistoryData() {
      //数据库请求操作
      axios
        .get("/api/room/myroom", {
          params: {
            pageNum: this.pagination.pageNum,
            pageSize: this.pagination.pageSize,
          },
        })
        .then((response) => {
          console.log(response);
          if (response.data.status == 1) {
            this.pagination.pageCount = response.data.result.totalPageNum;
            this.historyData = response.data.result.roomSet;
            if (this.historyData.length) {
              this.historyData.forEach((histroy, index) => {
                histroy["id"] =
                  index +
                  1 +
                  (this.pagination.pageNum - 1) * this.pagination.pageSize;
              });
            }
            this.$message.success("获取面试官面试记录成功");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取面试官面试记录失败");
        });
    },

    onPageSizeChange(pageSizeVal) {
      this.pagination.pageSize = pageSizeVal;
      this.getHistoryData();
    },
    onPageNumChange(pageNumVal) {
      this.pagination.pageNum = pageNumVal;
      this.getHistoryData();
    },

    beforeDialogRemoveClose(done) {
      this.setHistoryDefault();
      done();
    },
    onHistoryRemove(row) {
      this.history = JSON.parse(JSON.stringify(row));
      this.dialogRemoveVisible = true;
    },
    onHistoryRemoveCancel() {
      this.dialogRemoveVisible = false;
      this.setHistoryDefault();
    },
    onHistoryRemoveConfirm() {
      //数据库删除操作;
      axios
        .get("/api/room/delete", {
          params: {
            rid: this.history._id,
          },
        })
        .then((response) => {
          console.log(response);
          this.dialogRemoveVisible = false;
          this.setHistoryDefault();
          this.getHistoryData();
          this.$message.success("删除面试记录成功");
        })
        .catch((error) => {
          console.log(error);
          this.dialogRemoveVisible = false;
          this.setHistoryDefault();
          this.$message.error("删除面试记录失败");
        });
    },
  },
  data() {
    return {
      pagination: {
        pageNum: 1,
        pageSize: 5,
        pageCount: 1,
      },
      dialogRemoveVisible: false,
      history: {
        _id: "",
        room_name: "",
        create_time: "",
      },
      historyData: [],
      // historyData: [
      //   {
      //     _id: "1",
      //     room_name: "testHistory1",
      //     create_time: "11",
      //   },
      //   {
      //     _id: "2",
      //     room_name: "testHistory2",
      //     create_time: "22",
      //   },
      //   {
      //     _id: "3",
      //     room_name: "testHistory3",
      //     create_time: "33",
      //   },
      // ],
    };
  },
};
</script>

<style></style>
